<template>
  <view class="cart">
    <view class="cart_1" v-if="shopcarlist.length">
      <view class="title">
        <van-icon name="shop-o" />
        <text>购物车列表</text>
      </view>
      <view class="cartitem">
        <van-swipe-cell
          :id="item.goods_id"
          right-width="65"
          name="示例"
          v-for="(item, index) in shopcarlist"
          :key="item.goods_id"
        >
          <van-cell-group>
            <van-card
            :title="item.goods_name"
            >
              <view slot="thumb" class="thumb" @click="checkone($event)">
                <van-icon name="passed" v-if="!item.is_promote" color="#aaa" style="font-size: 40rpx;" :data-index="index" :data-is_promote="true" data-name="checkone"/>
                <van-icon name="checked" v-else color="#c00" style="font-size: 40rpx;" :data-index="index" :data-is_promote="false" data-name="checkone"/>
                <img :src="item.goods_small_logo" @click="goDetail(item.goods_id)" class="shopcarimg" alt=""/>
              </view>
              <view slot="price">
                <view class="ps">
                  <view class="price">
                    <text class="prices">￥{{ item.goods_price }}</text>
                  </view>
                  <view class="btn">
                    <van-stepper :value="item.goods_count" @change="countChange(index, $event)" />
                  </view>
                </view>
              </view>
            </van-card>
          </van-cell-group>
          <view slot="right" class="rightDelete" @click="delCarItem(index)">删除</view>
        </van-swipe-cell>
        <van-dialog id="van-dialog" />
      </view>
      <van-submit-bar
        :price="total"
        button-text="提交订单"
        :tip="true"
        :decimal-length="2"
        @submit="goSubmitOrder"
        :disabled="isDisabled"
      >
        <view class="- checkall"> 
          <van-icon name="passed" v-if="!checkallstate" color="#aaa" @click="checkallHandle(true)"/>
          <van-icon name="checked" v-else color="#c00" @click="checkallHandle(false)"/>
          <text class="chktext">全选</text>
        </view>
      </van-submit-bar>
    </view>
      <van-empty v-else description="亲，您还没有购买过任何商品" />

  </view>
</template>

<script>
import Dialog from '../../wxcomponents/vant/dialog/dialog';
  export default {
    data() {
      return {
        shopcarlist:wx.getStorageSync("shopcarlist") || [],
        checkallstate:false
      }
    },
    onLoad(){
      uni.$on('getshopcarlist',(key) => {
        this.shopcarlist = key
        
      })
      if(this.shopcarlist.every(item => item.is_promote)) {
        this.checkallstate = true
      }else{
        this.checkallHandle = false
      }
    },
    methods: {
      countChange(index,event){
        this.shopcarlist[index].goods_count = parseInt(event.detail)
        wx.setStorageSync("shopcarlist", this.shopcarlist)
      },
      checkallHandle(key){
        this.checkallstate = key
        this.shopcarlist = this.shopcarlist.map(item => {
          item.is_promote = key
          return item
        })
        wx.setStorageSync("shopcarlist", this.shopcarlist)
      },
      checkone(e){
        let data = e.target.dataset
        if(data.name === 'checkone'){
          this.shopcarlist[data.index].is_promote = data.is_promote
          let state = this.shopcarlist.every(item => item.is_promote)
          if(state){
            this.checkallstate = true
          }else{
            this.checkallstate = false
          }
          wx.setStorageSync("shopcarlist", this.shopcarlist)
        }
      },
      delCarItem(index){
        console.log(index);
        Dialog.confirm({
          title: '删除',
          message: '是否删除此商品?',
        })
          .then(() => {
            this.shopcarlist.splice(index, 1)
            wx.setStorageSync('shopcarlist', this.shopcarlist)
            wx.showToast({title:"已删除!"})
          })
          .catch(() => {
            wx.showToast({title:"用户已取消操作!"})
          });
      },
      goSubmitOrder(){
        wx.navigateTo({url:"/pages/order/order"})
      },
      goDetail(id){
        wx.navigateTo({url:'/pages/shopdetail/shopdetail?goods_id='+id})
      }
    },
    computed:{
      total(){
        let num = 0
        this.shopcarlist.forEach(item => {
          if(item.is_promote){
            num = num + (item.goods_price * item.goods_count)
          }
        })
        return num * 100
      },
      isDisabled(){
        return this.shopcarlist.every(item => !item.is_promote)
      }
    }
  }
</script>

<style scoped lang="scss">
.cart{
  .cart_1{
    .title{
      line-height: 100rpx;
      
      padding: 0 40rpx;
      text{
        font-size: 30rpx;
        padding: 0 10rpx;
        line-height: 95rpx;
      }
    }
    .cartitem{
      height:calc( 100vh - 200rpx );
      overflow: auto;
      .rightDelete{
        background-color: #f00;
        width: 130rpx;
        height: 208rpx;
        text-align: center;
        line-height: 208rpx;
        color: #fff;
        font-size: 30rpx;
      }
      .ps{
        display: flex;
        justify-content: space-between;
        .prices{
          font-size: 30rpx;
          color: #c00;
          width: 100%;
          height: 100%;
        }
      }
      .btn{
        display: flex;
        background-color: #F2F4F5;
        text-align: center;
        view{
          height: 60rpx;
          width: 60rpx;
          line-height: 60rpx;
          font-size: 30rpx;
        }
        view.text{
          border-left:1rpx solid #fff;
          border-right:1rpx solid #fff;
        }
        .btns:active{
          background-color: #e1e3e4;
        }
      }
      .thumb{
        display: flex;
        .shopcarimg{
          width: 160rpx;
          height: 160rpx;
        }
      }
      
    }
    .checkall{
      font-size: 40rpx;
      display: flex;
      .chktext{
        font-size: 30rpx;
        padding: 0 10rpx;
      }
    }
  }
}
</style>
